<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2023-05-17 16:06:06
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-08-28 16:56:26
-->
<template>
    <div class="screenRtTwo">
        <TitleTwo title="套餐办理分析"></TitleTwo>
        <div v-show="!props.isNodate" class="chartBox" ref="chartOneRef"
            :style="{ height: props.screenRtTwoHeight + 'px' }">
            <div ref="chartRef" class="chart"></div>
        </div>
        <div v-if="props.isNodate" class="chartBox" ref="chartOneRef"
            :style="{ height: props.screenRtTwoHeight + 'px' }">
            <NoDate title="暂无数据"></NoDate>
        </div>
    </div>
</template>
<script lang="ts" setup>
import canvasImg from '../assets/images/ikon_yuan@2x.png'
import { ref, onMounted } from 'vue'
import $util from "../util/util"
import * as echarts from 'echarts';
interface PropsType {
    screenRtTwoHeight?: number
    isNodate?: boolean
}
const props = withDefaults(defineProps<PropsType>(), {
    screenRtTwoHeight: 0,
    isNodate: false,
})
const seriesData = ref<any>([])
const chartRef = ref<any>(null);
let myChart: any = null;
const initChart = async (data: any) => {
    seriesData.value = data
    myChart = echarts.init(chartRef.value)
    var option = {
        legend: {
            orient: 'vertical',
            right:$util.fontSize(10),  //图例距离左的距离
            top: 'center',
            color:"#ffffff",
            itemGap:$util.fontSize(14),
            icon: "rect",
            verticalAlign: 'middle', // 垂直居中对齐
            itemWidth: $util.fontSize(12), // icon宽度
            itemHeight: $util.fontSize(12), // icon高度
            formatter: function (name:any) {
                let target, percentage;
                for (let i = 0; i < data.length; i++) {
                    if (data[i].name === name) {
                        target = data[i].value
                        percentage = data[i].rate
                    }
                }
                return [// 显式添加图标占位符
                    '{e|' + name + '}',
                    '{a|' + percentage + '%}',
                    '{b|' + target + '人}'
                ].join('');
            },
            textStyle: {
                    color: "#fff",
                    fontSize: $util.fontSize(14),
                    rich: {
                        e: {
                            fontSize: $util.fontSize(14),
                            color: "#ffffff",
                            fontWeight: 400,
                            verticalAlign: 'middle', // 垂直居中对齐
                            padding: [$util.fontSize(4),0, 0, 0],
                            fontFamily: 'HarmonyOS Sans SC',
                            lineHeight: $util.fontSize(0), 
                            width: $util.fontSize(90),
                        },
                        a: {
                            fontSize: $util.fontSize(14),
                            color: "#ffffff",
                            fontWeight: "400",
                            fontFamily: 'HarmonyOS Sans SC',
                            verticalAlign: 'middle', // 垂直居中对齐
                            padding: [$util.fontSize(4),0, 0, 0],
                            lineHeight: $util.fontSize(0), 
                            width: $util.fontSize(60),
                        },
                        b: {
                            fontSize: $util.fontSize(14),
                            color: "#ffffff",
                            fontWeight: "400",
                            verticalAlign: 'middle', // 垂直居中对齐
                            padding: [$util.fontSize(4),0, 0, 0],
                            lineHeight: $util.fontSize(0),
                            fontFamily: 'HarmonyOS Sans SC',
                        }
                    },
                },
        },
        color: ['#4281FF','#88DBAA','#FB8416','#F9DA4F','#7B8DFF','#F984E6'],
        series: [
            {
                name: '',
                confine: true,
                type: 'pie',
                left: '-50%',
                radius: ['38%', '80%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                clockWise: false, // 默认逆时针
                normal: {
                    borderWidth: 2,
                    borderColor: '#fff'
                },
                itemStyle: {
                    borderColor: '#0A1739',
                    borderWidth: 1
                },
                label: {
                    show: false,
                    position: 'center',
                    normal: {
                        show: false,
                        position: 'center',
                        rich: {
                            total: {
                                fontSize: $util.fontSize(18),
                                fontFamily: "Arial-Bold, Arial",
                                color: '#ffffff',
                                lineHeight: $util.fontSize(22),
                                fontWeight: 'bold'
                            },
                            active: {
                                fontFamily: "Microsoft YaHei-Bold, Microsoft YaHei",
                                fontSize: $util.fontSize(14),
                                color: '#ffffff',
                                lineHeight: $util.fontSize(22),
                                fontWeight: 'bold'
                            },
                        }
                    },
                    emphasis: {
                        show: false
                    }
                },
                data: data,
            }
        ],
        // 新增：中心图片配置
        graphic: [{
            // type: 'image',
            // left: 'center',
            // center: 'center',
            
            // style: {
            //     image: canvasImg, // 图片URL（本地路径需替换为项目路径）
            //     width: $util.fontSize(70),  // 图片宽度
            //     height: $util.fontSize(70)  // 图片高度
            // },
            // z: 1 // 层级（大于饼图的z值，确保显示在最上层）
        elements: [
            {
              type: 'image',
              style: {
                image: canvasImg, // 图片地址
                width: $util.fontSize(65),
                height:$util.fontSize(65)
              },
              left: '18.1%', 
              top: 'center'
            }
          ]
        }],
        tooltip: {
            backgroundColor: "#fff",
            borderColor: 'transparent',
            extraCssText: "box-shadow: 0px 9px 28px 1px rgba(0,0,0,0.05);",
            // 添加自定义position函数，让tooltip显示在饼图外部上方
            // position: ['100%', '50%'],
            formatter: function (obj: any) {
                return (
                    `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                    <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">总人数：</span></span>
                    <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${data[obj.dataIndex].value}</span>
                </span>` + `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                    <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">总金额：</span></span>
                    <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${data[obj.dataIndex].amount}元</span>
                </span>` + `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                    <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">占比：</span></span>
                    <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${data[obj.dataIndex].rate}%</span>
                </span>`
                )
            },
        },
    }
    myChart.setOption(option)
}
//重新加载图表
const reloadChart = () => {
    disposeChart()
    initChart(seriesData.value)
}
const disposeChart = () => {
    if (myChart) {
        myChart.dispose();
    }
}
onMounted(async () => {
    window.addEventListener("resize", () => {
        setTimeout(() => {
            reloadChart()
        }, 500)
    });
})
defineExpose({ initChart })
</script>
<style lang="scss" scoped>
.chartBox {
    width: 100%;
    position: relative;

    .chart {
        width: 100%;
        height: 100%;
        max-height: 250px;
    }
}
</style>